import type { GoogleElements } from '../../../../../../../../types/constants/personalization/google'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  AppStyleCollections,
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'
import { GoogleWebPage } from './web'

export class GoogleAllPage {
  elements: GoogleElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GOOGLE]
  private static instance: GoogleAllPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()
  private readonly webPage: GoogleWebPage = GoogleWebPage.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): GoogleAllPage {
    if (!GoogleAllPage.instance) {
      GoogleAllPage.instance = new GoogleAllPage()
    }
    return GoogleAllPage.instance
  }

  init(): void {
  }

  /**
   * 相关问题的样式
   */
  relatedQuestionPairStyles(): string {
    return `
    /* 相关问题 */
    div[jscontroller]:has(.related-question-pair) {
      margin-bottom: 0 !important;
      
      span {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
      
      cite {
        span {
          color: var(${this.themeVarService.search.default.textNeutral}) !important;
        }
      }
      
      ul > li {
        color: var(${this.themeVarService.search.default.text}) !important;
      }
      
      .related-question-pair {
        div:not(:has([data-ved])) {
          border-bottom: none !important;
        }
        
        /* 去掉图标背景 */
        > div > div > div > div:nth-child(2) {
          background: transparent !important;
        }
      }
      
      /* 去掉分割线 */
      > div > div:last-child {
        span {
          color: var(${this.themeVarService.link.default.text}) !important;
        }
        
        > div {
          background: transparent !important;
        }
        
        div[role="button"] {
          text-decoration: none !important;
        }
      }
    }
    `
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  getMainStyles(): string {
    return `
/* 隐藏样式 */
#main #cnt #rcnt #search #rso div[data-rpos]:has(${generateHideSelector(`.${AppStyleCollections.Google.LINK_CONTAINER}`)}) {
  h3 {
    padding-top: 0 !important;
    margin: 0 !important;
  }
}

/* 搜索结果列数样式 */
&[${AppStyleCollections.Search.attr.IS_MULTI_COLUMN}="true"] {
  #main #cnt #rcnt {
    /* 结果推荐 | 大家还在搜 */
    #rhs, #botstuff #bres {
      max-width: ${AppStyleCollections.Search.value.ITEM_WIDTH} !important;
    }
    
    /* 结果推荐 */
    #rhs {
      position: unset !important;
      margin-left: unset !important;
      width: unset !important;
    }
  }
}

&[${AppStyleCollections.Search.attr.IS_MULTI_COLUMN}="false"] {
  #main #cnt #rcnt {
    /* 大家还在搜 */
    #botstuff #bres {
      max-width: unset !important;
      min-width: ${AppStyleCollections.Search.value.ITEM_WIDTH} !important;
      width: ${AppStyleCollections.Search.value.ITEM_DYNAMIC_WIDTH} !important;
    }
    
    /* 结果推荐 */
    #rhs {
      position: absolute !important;
      left: 100% !important;
      top: 0 !important;
      margin-left: 20px !important;
      width: max-content !important;
    }
  }
}

/* 主内容 */
#main {
  #cnt {
    #appbar {
      display: none !important;
    }

    #rcnt {
      display: block !important;
      position: relative !important;
      
      > div {
        &:has(#m-x-content) {
          background-color: white !important;
        }
      }
      
      #search {
        /* 搜索结果列表（类型一） */
        #rso:has(#kp-wp-tab-overview) {
          #kp-wp-tab-overview {
            ${this.searchCommonStyles.resultContainerStyles({ fullWidth: false })}
            
            /* 非结果项 */
            > div:empty, > div:has(#tadsb), > span {
              display: none !important;
            }
            
            /* 结果项 */
            > div {
              ${this.searchCommonStyles.resultItemStyles()}
              
              > div {
                margin: 0 !important;
              } 
              
              [jscontroller] {
                background-color: transparent !important;
                margin-bottom: 0 !important;
              }
              
              /* 标题 */
              h3 {
                color: var(${this.themeVarService.link.default.text}) !important;
                
                &:hover {
                  color: var(${this.themeVarService.link.default.textHover}) !important;
                }
              }
              
              a {
                span {
                  color: var(${this.themeVarService.search.default.text}) !important;
                }
              }
              
              cite {
                span {
                  color: var(${this.themeVarService.search.default.textNeutral}) !important;
                }
              }
              
              [role="heading"] {
                color: var(${this.themeVarService.search.default.text}) !important;
              }
              
              div:has(> a) {
                background-color: transparent !important;
              }
              
              /* 描述 */
              [data-sncf="1"] {
                span {
                  color: var(${this.themeVarService.search.default.text}) !important;
                }
              }
              
              /* 标签 */
              [data-sncf="2"] {
                [role="list"] {
                  a {
                    span {
                      color: var(${this.themeVarService.link.default.text}) !important;
                    }
                    
                    > div > div {
                      outline-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
                    }
                  }
                }
              }
              
              &.${AppStyleCollections.Search.class.SIMILAR_SIMILAR_QUERIES} {
                background: transparent !important;
                box-shadow: none !important;

                a {
                  span {
                    color: ${this.themeVarService.search.default.textBase} !important;
                  }
                }
              }
            }
            
            > div:has(.related-question-pair) {
              ${this.relatedQuestionPairStyles()}
            }
          }
        }  
        
        /* 搜索结果列表（类型二） */
        #rso:not(:has(#kp-wp-tab-overview)) {
          ${this.searchCommonStyles.resultContainerStyles({ fullWidth: false })}
          margin-bottom: ${this.themeVarService.search.resultItem.gap} !important;
          margin-top: ${this.themeVarService.search.resultItem.gap} !important;
          
          /* 非结果项 */
          > div:not(:has(div[data-rpos])) {
            display: none !important;
          }
          
          /* 结果项 */
          > div {
            ${this.searchCommonStyles.resultItemStyles({ overflowHide: false, setPadding: false, noMarginBottom: true })}
            
            /* 结果标签列表 */
            div[role="list"] {
              a {
                div {
                  border-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
                }
              }
            }
            
            /* 图片 */
            &.${AppStyleCollections.Search.class.SEARCH_ITEM_IMAGE} {
              [role="heading"] {
                span {
                  color: var(${this.themeVarService.search.default.text}) !important;
                }
              }

              hr {
                background-color: transparent !important;
              }
            }
          }
          
          div[data-rpos] {
            background: transparent !important;
            color: var(${this.themeVarService.search.default.text}) !important;
            margin: 0 !important;
            padding: ${this.themeVarService.search.resultItem.padding} !important;
            overflow: hidden !important;
            
            ${this.webPage.contentStyles()}
            ${this.relatedQuestionPairStyles()}
          }
        } 
      }
      
      /* 大家还在搜 */
      #botstuff {
        width: fit-content !important;
        margin: 0 auto !important;
        
        #bres {
          [role="heading"] {
            color: var(${this.themeVarService.search.default.text}) !important;
          }
        }
      }
      
      /* 结果推荐 */
      #rhs { 
        block-component > div {
          border-radius: 8px !important;
        }
        
        .kp-wholepage {
          border-left: none !important;
        }
      }
    }
  }
}
`
  }
}
